import Vue from '@/main.js'
function renderLine(option) {
  this._init(option)
}
renderLine.prototype = {
  _init: function(option) {
    this.grid = {
      left: '20px',
      right: '90px',
      bottom: '40px',
      top: '40px',
      containLabel: true
    }
    this.tooltip = {
      trigger: 'axis',
      backgroundColor: 'transparent',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(126,199,255,0)' // 0% 处的颜色
            }, {
              offset: 0.5,
              color: 'rgba(126,199,255,1)' // 100% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(126,199,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      },
      formatter: function(params) {
        // return `在${params[0].name}km处，衰减为${params[0].value}db`
        let html = ''
        let str = ''
        params.forEach(e => {
          str += `<p>在${e.value[0]}距离处，连损值为：${e.value[1]}dbm</p>`
        })
        if (str) {
          html +=
            '<div>' +
                str +
            '</div>'
          return html
        }
      }
    }
    this.legend = {
      show: true,
      right: 0,
      icon: 'rect',
      textStyle: {
        color: 'red'
      }
    }
    this.xAxis = [
      {
        name: '距离',
        nameTextStyle: {
          color: '#fff'
        },
        type: 'value',
        axisTick: {
          show: true
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#17295D'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#17295D'
          }
        },
        axisLabel: {
          color: '#fff'
        },
        boundaryGap: false,
        max: function(value) {
          return Math.ceil(value.max)
        }
      }
    ]
    this.yAxis = [
      {
        name: '链损值（db）',
        nameTextStyle: {
          color: '#fff',
          align: 'left'
        },
        type: 'value',
        axisLabel: {
          formatter: '{value}/dB',
          color: '#fff'
        },
        axisTick: {
          show: true
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#17295D'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#17295D'
          }
        }
      }
    ]
    this.dataZoom = [{
      type: 'slider',
      start: 0,
      end: 100,
      height: 20,
      backgroundColor: 'rgba(2,96,171,0.5)',
      dataBackground: {
        lineStyle: {
          color: '#fff9c1',
          width: 1
        }
      },
      fillerColor: 'rgba(53,204,251,0.2)',
      borderColor: 'rgba(53,204,251,0.9)',
      handleSize: '80%',
      handleStyle: {
        color: '#a0f1fb',
        shadowBlur: 3,
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowOffsetX: 2,
        shadowOffsetY: 2
      },
      textStyle: {
        color: '#fff'
      },
      bottom: 5
    }]
    this.color = ['#46a6ff']
    this.series = option.data || []
  },
  set_series: function(option) {
    return option.data
  }
}
export default renderLine
